<template>
  <div id="HomeIndex">
    <UserStatus></UserStatus>
    <div id="left">
      <Left @to="to"></Left>
      <div class="wh">
        <a href="mailto:bji0510@163.com">
          <i class="el-icon-help"></i> &nbsp;维护:bji0510@163.com</a
        >
      </div>
    </div>
    <div id="right">
      <iframe
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :src="route"
        frameborder="0"
        width="100%"
        :height="height"
      ></iframe>
      <el-card style="margin-top: 10px">
        <div >
          2019-2020 &copy;
          <a href="https://blog.csdn.net/Run_ing?t=1" target="_blank">BeiRonin ⭐</a>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import Left from "@/components/home/Left";
import UserStatus from "@/components/user/UserStatus";
import loading from "@/assets/loading.gif";
export default {
  name: "HomeIndex",
  data() {
    return {
      route: "/home",
      height: "",
      loadGif: loading,
      loading: false,
    };
  },
  components: {
    Left,
    UserStatus,
  },
  methods: {
    to(route) {
      this.loading = true;
      this.route = route;
    },
  },
  mounted() {
    this.height = window.outerHeight * 0.8 + "px";
    var iframe = document.getElementsByTagName("iframe")[0];
    iframe.onload = () => {
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    };
  },
};
</script>
<style lang="less" scoped>
#left {
  width: 20%;
  overflow: hidden;
  position: absolute;
  left: 0;
  height: 100%;
  background-color: #545c64;
  .wh {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
}
#right {
  width: 80%;
  float: right;
}
.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  .gif {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 40%;
    background-repeat: repeat-x;
    background-size: 50px 80px;
  }
}
</style>